<template>
	<view>
		<view class="report_base">
			<!-- 类型一 -->
			<view :class="{
          report_card: true,
          report_typeOne: item.type == '1' ? true : false,
          report_typeTwo: item.type == '2' ? true : false,
          report_typeThree: item.type == '3' ? true : false,
        }" v-for="(item, i) in reportInfo" :key="i">
				<!-- 报告单标题 -->
				<view class="report_title">{{ item.title }}</view>
				<view class="report_itemBox">
					<view class="report_date">{{ item.date }}</view>
					<view class="report_more" @click="moreInfo(item)">查看详情 <view class="type_icon"></view>
					</view>
				</view>
			</view>

			<view v-show="loadShow" class="load"></view>
			<view class="nomore_tips"> {{ loadtips }} </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				reportInfo: [],
				loadtips: "",
				loadShow: false, //显示加载动画
				loadSwitch: false, //加载节流阀
			};
		},
		onPullDownRefresh() {
			this.init();
		},
		onReachBottom() {
			//this.getMoreList();
		},
		onLoad() {
			this.init();
		},
		methods: {
			init() {
				//信息初始化
				let user=uni.getStorageSync("user");
				let params ={
					kh0000:user.sfzh00,
					klx000:"3",
					patid0:user.patid0,
					ywlsh0:""+new Date().getTime(),
					funid:"F07.10.02.01"
				}
				this.$postJson("/qnyesb/qnyesbproxy",params,res=>{
					if(res.state==0){
						this.reportInfo=res.data.retrieve;
					}else{
						uni.showToast({
							title:res.message,
							icon:"none",
							duration:3000
						})
					}
				})
			},
			getMoreList() {
				// 获取更多数据
				let moreList = {};
				let that = this;
				if (this.reportInfo.length < 10 && this.loadSwitch == false) {
					this.loadSwitch = true; //打开节流阀
					this.loadShow = true; //打开加载动画
					setTimeout(() => {
						// 每次加载三条数据
						that.loadSwitch = false; //数据加载完毕关闭节流阀
						this.loadShow = false; //关闭加载动画
					}, 1000);
				} else {
					this.loadtips = "—————— 没有更多了——————";
				}
			},
			moreInfo(item) {
				// 报告单详情
				console.log(item);
				alert(item.title);
			},
		},
	};
</script>

<style scoped>
	.report_base {
		padding-bottom: 20px;
	}

	/* 报告列表 */
	.report_card {
		width: 96%;
		/* height: 170px; */
		margin: 0 auto;
		background: #ffffff;
		margin-top: 10px;
		border-radius: 6px;
		position: relative;
	}

	/* 报告类型 */
	.report_typeOne::after,
	.report_typeTwo::after,
	.report_typeThree::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 110px;
		height: 34px;
		line-height: 34px;
		text-align: center;

		font-size: 16px;
		font-weight: 300;
		color: #fff;

		border-radius: 6px 6px 0 40px;
	}

	.report_typeOne::after {
		content: "类型1";
		background-color: #4ebcb8;
	}

	.report_typeTwo::after {
		content: "类型2";
		background-color: #4eb9d9;
	}

	.report_typeThree::after {
		content: "类型3";
		background-color: #4e83d9;
	}

	/* 报告标题 */
	.report_card .report_title {
		padding: 0 8px;
		padding-top: 36px;
		height: 96px;
		box-sizing: border-box;
		font-size: 17px;
		font-weight: 700;
	}

	/* 报告日期与详情Box */
	.report_itemBox {
		border-top: 1px solid #f0f0f0;
		width: 94%;
		height: 40px;
		line-height: 40px;
		margin: 0 auto;
		bottom: 0;
		color: #666;
		display: flex;
		justify-content: space-between;
	}

	/* 报告日期 */
	.report_itemBox .report_date {}

	/* 查看详情 */
	.report_itemBox .report_more {
		color: #999;
	}

	/* 右箭头icon */
	.report_itemBox .type_icon {
		width: 12.02px;
		height: 12.02px;
		line-height: 40px;
		background-image: url("../../static/registeredType/124@2x.png");
		background-size: 12px 12px;
		display: inline-block;
	}

	/* 没有更多 */
	.nomore_tips {
		margin-top: 10px;
		text-align: center;
		color: #999;
		position: relative;
		font-size: 14px;
	}

	/* 加载动画 */
	.load {
		width: 40px;
		height: 40px;
		margin: 0 auto;
		margin-top: 10px;
		position: relative;
		border-radius: 50%;
		overflow: hidden;
		background-color: rgba(0, 169, 178, 0.2);
	}

	.load::before {
		content: "";
		width: 60px;
		height: 60px;
		background-color: #4ebcb8;
		position: absolute;
		left: 50%;
		bottom: 50%;
		z-index: 1;
		transform-origin: left bottom;
		animation: rotate 1.5s infinite linear;
	}

	.load::after {
		content: "";
		width: 30px;
		height: 30px;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		background-color: #f2f6f9;
		z-index: 2;
		border-radius: 50%;
	}

	@keyframes rotate {
		0% {
			transform: rotate(0);
		}

		50% {
			transform: rotate(180deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>
